<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="浪里白条" @click="lang">
            <input type="button" value="浪子回头" @click = "stop">
            <h4>{{msg}}</h4>

        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'猥琐发育,别浪~~!',
                    interId:null//在讲data上定义定时器id
                },
                methods:{
                    lang(){//想要获取data中的数据就要用this的方法来获取

                    if(this.interId !=null) return;
                        console.log(this.msg);
                       this.interId=setInterval(() =>{//箭头函数this指向和外面的相同
                        //如果用setInterval(function(){},400)的话this指向windou
                             //获取到第一个字符
                        var start = this.msg.substring(0,1)
                        //获取到后面的所有的字符
                        var end = this.msg.substring(1);
                        //重新拼接得到的字符串,并赋值给this.msg
                        this.msg = end + start;
                        //注意vm实例只用监听data的数据

                        },400)//要清除定时器id的话

                       
                        
                    },
                    stop(){
                        clearInterval (this.interId)
                        //每当清除了定时器id后要重新赋值给
                        this.interId=null;

                    }
                }
            })
        </script>
    </body>
</html>